<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <meta name="format-detection" content="telephone=no" />
	 	<meta content="yes" name="apple-mobile-web-app-capable"/>
	 	<meta content="yes" name="apple-touch-fullscreen"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>太空救援</title>
		<script type="text/javascript">
		    var oHtml = document.getElementsByTagName('html')[0];
	        var iWidth  = document.documentElement.clientWidth;
	        iWidth = iWidth > 540 ? 540 : iWidth;
	        oHtml.style.fontSize = Math.floor(iWidth/15) + 'px';
	   </script>
	    <link rel="stylesheet" href="assets/css/game/reset.css" />
	    <link rel="stylesheet" href="assets/css/game/space.css" />
	    <link rel="stylesheet" href="assets/css/game/aui.css" />	   
	   <!--[if IE]>
			<style>
			#bird,#text,#background{display:none;}
			</style>
		<![endif]-->
	</head>
	<body>
		<div id="main" class="bask-ticket">
			<a class="back" href="home1.html"><img src="assets/images/game/back.png" alt="" /></a>
			<a class="rule" href="rule.html">
				<img src="assets/images/game/rule.png" alt="" />
			</a>
			<img class="add-img" src="assets/images/game/add.png" alt="" />
			<!--载入照片-->
			<div class="clipbg">
				<div id="clipArea"></div>
				<div class="loading displaynone">正在载入图片...</div>
				<div class="footer">
					<dl>
						<dd><img src="assets/images/game/photo.png" alt="" /><input type="file" id="file" accept="image/*" ></dd>
		      			<dd id="clipBtn"><img src="assets/images/game/sure_place.png" alt="" /></dd>
					</dl>
				</div>
			</div>
			
			<!--切好的图片-->
			<img class="cut-img" src="" alt="" />
			
			<!--信息录入-->
			<div class="fill-msg">
				<div class="msg">
					<span>姓名：</span>
					<input type="text" class="name" value="张晓" />
				</div>
				<div class="msg">
					<span>电话：</span>
					<input type="text" class="mobile" value="18211632632" />
				</div>
			</div>
			<!--报名-->
			<img class="apply-btn" src="assets/images/game/apply.png" alt="" />
		</div>
	</body>
	<script type="text/javascript" src="assets/js/game/game.js"></script>
	<script type="text/javascript" src="assets/js/game/lib/camera.js/hammer.min.js"></script>
	<script type="text/javascript" src="assets/js/game/lib/camera.js/lrz.all.bundle.js"></script>
	<script type="text/javascript" src="assets/js/game/lib/camera.js/iscroll-zoom-min.js"></script>
	<script type="text/javascript" src="assets/js/game/lib/camera.js/PhotoClip.js"></script>
	<script type="text/javascript">
		// 图片上传及截取
		var clipArea = new  PhotoClip("#clipArea", {
			size: [8*(iWidth/15), 8*(iWidth/15)],//裁剪框大小
			outputSize:[8*(iWidth/15), 8*(iWidth/15)],//打开图片大小，[0,0]表示原图大小
			file: "#file",
			ok: "#clipBtn",
			loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
				$(".photo-clip-rotation-layer").show();
//				$(".cut-img").css({"z-index":"-1","opacity":"0"});
			},
			loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。

			},
			done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。			
				console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
				$(".cut-img").attr("src",dataURL).css({"z-index":"11","opacity":"1"});
				$(".photo-clip-rotation-layer").hide();
			}
		});
		
		// 信息验证
		function checkMessage(){
			if($(".name").val() == ""){
				alert("姓名不能为空");
				return false;
			}else if($(".cut-img").attr("src") == ""){
				alert("请上传票根图片");
			}else if($(".mobile").val() == ""){
				alert("手机号不能为空");
				return false;
			}else if($(".mobile").val() != "" && !$(".mobile").val().match(/^1[3|4|5|7|8][0-9]{9}$/)){
				alert("请填写正确的手机号");
				return false;
			}else{
				return true;
			}
		}
		
		// 确认报名
		$(".apply-btn").click(function(){
			var dataUrl = $(".cut-img").attr("src");
			var imgCode = dataUrl.split(',')[1];
			if(checkMessage()){
				isApply(imgCode);
			}
		});
		
		// 报名
		function apply(imgCode){
			$.ajax({
				url:"http://yhw666.mynatapp.cc/game/uploadTicket",
				type:"post",
				data:{
					imgCode: imgCode,
					name: $(".name").val(),
					mphone: $(".mobile").val(),
				},
				success:function(data){
					console.log(data);
					if(data.success == "成功报名"){
						alert("您已报名成功");
						window.location.href="success.html";
					}else if(data.error == "报名失败"){
						alert("报名失败");
					}
				},
				error:function(error){
					console.log(error);
				},
			});
		}
		
		// 判断是否报名
		function isApply(imgCode){
			$.ajax({
				url:"http://yhw666.mynatapp.cc/game/isSign",
				type: "post",
				success:function(data){
					if(data == true){
						alert("您已报名");
					}else{
						apply(imgCode);
					}
				},
				error:function(error){
					console.log(error);
				}
			});
		}
		
		// 解决输入键盘把页面顶上去的问题
		var bodyHeight=$("body").height();
		$(".name").focus(function(){
			$("body").height(bodyHeight);
		});
		

			
	</script>
</html>
